<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{{ $article->title }}</title>
    <meta name="keywords" content="{{ $article->title }}">
    <meta name="description" content="{{ $article->title }}">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" id="wp-block-library-css" href="/css/style.min.css" type="text/css" media="all">
    <link rel="stylesheet" id="highlight-monokai-sublime-css" href="/css/monokai-sublime.css" type="text/css" media="all">
    <link rel="stylesheet" id="qzhai_app-css" href="/css/cell.css" type="text/css" media="all">
    <link rel="stylesheet" id="qzhai_app-css" href="/css/gohan.css" type="text/css" media="all">

    <script type="text/javascript" src="/js/jquery.js" charset="uft-8"></script>
    <script type="text/javascript" src="/js/jquery-migrate.min.js"  charset="uft-8"></script>
    <script type="text/javascript" src="/js/highlight.pack.js"  charset="uft-8"></script>
    <script type="text/javascript" src="/js/cell.js"  charset="uft-8"></script>
    <script>var func_qzhai = [];</script>
    @include('layout.statistics')

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        #backToTop {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #555555;
            background-image: linear-gradient(#777777, #555555);
            color: #ffffff;
            font-size: 24px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s;
        }

        #backToTop:hover {
            background-color: #333333;
        }
    </style>

</head>
<body>
<div id="qzhai-curtain"></div>
<header class="qzhai-header  ">
    <div uk-sticky="top:150; animation: uk-animation-slide-top;">

    </div>
</header>

<div id="qzhai-quick-window" class="uk-flex-top" uk-modal="bg-close: false;esc-close:false">
    <div class="uk-modal-dialog">
        <div id="qzhai-quick-window-content" class="uk-width-1-1">

            <div class="qzhai-qwc"> </div>
            <div class="wp loading">
                <div class="qzhai-content uk-card uk-card-default __null">
                    <div class="uk-card-body">
                        <div class="h1"></div> <span></span>
                        <div class="img"></div>
                        <div><p></p><p></p><p></p><p></p></div>
                    </div>
                </div>
            </div>
            <div class="qzhai-quick-window-close-ft uk-flex uk-flex-center">
                <a class="qzhai-quick-window-close uk-close-large" href="javascript:;" uk-close=""></a>
            </div>
        </div>
    </div>
</div>

{{--数据加载--}}
<div class="qzhai-qwc" style="display: block;">

    <div class="wp">

        <div class="qzhai-content uk-card uk-card-default" id="top">

            <div class="uk-card-body uk-flex uk-flex-between uk-flex-column">

                <div class="qzhai-quick-window-close-hd">
                    <div class="wp uk-flex uk-flex-right" >
                        <a href="#" onClick="close_window()">
                            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line>
                                <line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line>
                            </svg>
                        </a>

                    </div>
                </div>
                <br><br>

                <article class="qzhai-article uk-article">

                    <h1 class="uk-article-title">
                        {{ $article->title }}
                    </h1>

                    <ul class="qzhai-article-subnav uk-subnav uk-subnav-divider" uk-margin="">
                        <li class="uk-first-column">
                            <a href="#">
                                <i class="qzf qzf-user"></i> {{ $article->author??"不知名小编" }} </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="qzf qzf-layers"></i>
                            </a>
                            <a href="#">
                                {{ $article->category_name }}
                            </a>
                        </li>
                        <li><span><i class="qzf qzf-calender"></i>  {{ date('Y-m-d',strtotime($article->created_at)) }} </span></li>
                        <li><span><i class="qzf qzf-eye"></i>  {{ $article->pv }}</span></li>

                    </ul>

                    <div class="qzhai-the-content">

                        {!! $article->content !!}

                    </div>

                    <div class=" uk-card uk-card-default uk-margin">
                        <div class="uk-card-header">
                            <div class="qzhai-card-header-title">评论</div>
                        </div>

                        <div id="qzhai_comments" class="qzhai-comment ">
                            <div class="qzhai-comment-list-box">
                                <ul class="uk-comment-list" id="qzhai-comment-list">

                                    @foreach($comments as $comment)
                                        <li id="qzhai-comment-18">
                                            <article class="uk-comment uk-visible-toggle " tabindex="-1">
                                                <header class="uk-comment-header uk-position-relative">
                                                    <div class="uk-grid-medium uk-flex-middle uk-grid" uk-grid="">
                                                        <div class="uk-width-auto uk-first-column">
                                                            <img alt="" src="{{ $comment->avatar }}"  srcset=""
                                                                 class="avatar avatar-50 photo" height="50" width="50">
                                                        </div>
                                                        <div class="uk-width-expand">
                                                            <h4 class="uk-comment-title uk-margin-remove">
                                                                {{ $comment->nickname }}
                                                            </h4>
                                                            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                                                                <li><a href="javascript:;">{{ $comment->created_at }}</a></li>
{{--                                                                <li>--}}
{{--                                                                    <a rel="nofollow" class="comment-reply-link"--}}
{{--                                                                       href="http://demo.qzhai.net/gohan/?p=99&amp;replytocom=18#respond"--}}
{{--                                                                       data-commentid="18" data-postid="99"--}}
{{--                                                                       data-belowelement="comment-18"--}}
{{--                                                                       data-respondelement="respond" aria-label="回复给think">回复 </a>--}}
{{--                                                                </li>--}}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </header>
                                                <div class="uk-comment-body">
                                                    <p>
                                                        {{ $comment->content }}
                                                    </p>
                                                </div>
                                            </article>
                                        </li>
                                    @endforeach



                                </ul>

                                <div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="qzhai_comment_form_box" class="uk-card uk-card-default uk-margin">
                        <div class="hd">
                            <img alt="" src="/avatar/小人同而不和の唐红新.jpg" srcset="/avatar/小人同而不和の唐红新.jpg" class="avatar avatar-32 photo avatar-default" height="32" width="32">      <span style="display: none;">
                  发表评论
                <button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
      </span>

                            <i style="display: block;">说点什么</i>

                        </div>

                        <div class="bd" style="display: none;">

                            <div class="qzhai-html qzhai-home-item" id="msg" style="display: none">
                                <div class="qzhai-home-title uk-margin uk-text-center">
                                    <span>提示</span>
                                </div>
                                <div class="uk-alert-success" uk-alert="" id="success_alert" style="display: none">
                                    <a class="uk-alert-close" uk-close=""></a>
                                    <p id="success"></p>
                                </div>
                                <div class="uk-alert-danger" uk-alert="" id="error_alert" style="display: none">
                                    <a class="uk-alert-close" uk-close=""></a>
                                    <p id="error">我的秘密</p>
                                </div>
                            </div>

                            <form method="post" action="{{ route('comments') }}" id="qzhai_comment_form"
                                  class="comment-form uk-grid-small uk-grid uk-grid-stack" uk-grid="">

                                <div class="uk-width-1-1 uk-first-column">
                                    <textarea id="content" class="qzhai-comment-textarea uk-textarea" name="content" rows="3"></textarea>
                                </div>

                                <div class="uk-width-1-4@s uk-grid-margin uk-first-column">
                                    <div class="uk-inline uk-width-1-1">
                                        <span class="uk-form-icon qzf qzf-user"></span>

                                        @if(session('user'))
                                            <input id="nickname" class="uk-input" type="text" value="{{ session('user')?session('user')->nickname:"" }}"
                                                   placeholder="取个网名吧" name="nickname" disabled>
                                        @else
                                            <input id="nickname" class="uk-input" type="text" value="{{ session('user')?session('user')->nickname:"" }}"
                                                   placeholder="取个网名吧" name="nickname" >
                                        @endif

                                    </div>
                                </div>
                                <div class="uk-width-1-4@s uk-grid-margin">
                                    <button  class="qzhai-comment-submit uk-button uk-width-1-1" type="button"
                                             onclick="subForm()">
                                        评论
                                    </button>
                                </div>

                                <input class="uk-input" type="hidden" id="_token" value="{{ csrf_token() }}" >
                                <input id="article_id" class="uk-input" type="hidden" value="{{ $article->id }}"  name="article_id">

                            </form>
                        </div>
                    </div>





                </article>



                <a href="#" id="backToTop" title="回到顶部">&#8593;</a>

                <div class="qzhai-quick-window-close-hd" style="margin-right:50%;margin-top: 20px;">
                    <div class="wp uk-flex uk-flex-right">
                        <a href="#" onClick="close_window()">
                            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line>
                                <line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line>
                            </svg>
                        </a>
                    </div>
                </div>


            </div>

        </div>
    </div>

</div>


<script src="/js/jquery-3.1.1.js"></script>



<script>


    var qzhai = {
        "url":"",
        "ajaxUrl":"",
        "_use_queue":[],
        "assets":"",
        "is_mobile":false,
        "comment_nonce":""
    };
    qzhai.ajaxIgnore = "";
    func_qzhai.push(function($){
        $('.qzhai-content pre').each(function(i, e) {
            $(e).addClass('qzhai_highlight').append('<div class="qzhai_highlight_heade"><span></span><div>');
            hljs.highlightBlock(e);
        });
    });

    function close_window(){
        history.back()
    }

    function subForm(){
        let nickname = $("#nickname").val();
        let content = $("#content").val();
        let _token = $("#_token").val();
        let article_id = $("#article_id").val();
        $.ajax({
            url:"{{ route('comments') }}",
            type:"POST",
            data:{nickname:nickname,content:content,article_id:article_id,_token:_token},
            dataType:"json",
            success:function(data){
                if(data.code==1){
                    //成功
                    $("#msg").show();
                    $("#success_alert").show();
                    $("#success").text(data.msg);
                    window.location.reload();
                }else{
                    $("#msg").show();
                    $("#error_alert").show();
                    $("#error").text(data.msg);
                }
            },
            error:function(er){
                console.log('错误');
            }
        })
    }

</script>

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("backToTop").style.display = "block";
        } else {
            document.getElementById("backToTop").style.display = "none";
        }
    }

    document.getElementById("backToTop").addEventListener("click", function(e) {
        e.preventDefault();
        document.documentElement.scrollTop = 0;
    });
</script>

</body>
</html>

